<template>
  <div class="synthetic-history">
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <div class="contentContainer">
        <!-- 标题 -->
        <div class="contentTitle">
          合成记录
        </div>

        <!-- 内容 -->
        <div class="contentBody">
          <template v-if="isPhone">
            <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
              <synthetic-card
                which="history"
                :resData="currentData"
                :show_url="show_url"
              ></synthetic-card>
            </mescroll-vue>
          </template>

          <template v-else>
            <synthetic-card
              which="history"
              :resData="currentData"
              :show_url="show_url"
            ></synthetic-card>
          </template>

          <div class="noneTip" v-if="currentData.length <= 0">
            <img class="noneTip_img" src="@/assets/images/mobile_black/center/null.png" />
            <div class="noneTip_txt">暂无您的合成记录哦～</div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pag" v-if="currentData.length > 0">
          <ElPage @handleCurrentChange="handleCurrentChange" :total="total" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// --- others ---
import MescrollVue from "mescroll.js/mescroll.vue";
// --- compontents ---
import { ElPage } from "@/components";
import SyntheticCard from "./components/SyntheticCard.vue";
// --- vuex ---
import { mapState } from "vuex";
// --- api ---
import { getRecordApi } from "@/api";
// --- utils ---
import { iscode, isPhone } from "@/utils";

export default {
  name: "SyntheticHistory",
  components: { SyntheticCard, ElPage, MescrollVue },
  data() {
    return {
      isPhone: false,
      currentData: [],
      total: 0,
      currentPage: 1,
      pagesize: 4,
      show_url: "",
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        auto: false, // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调
        page: {
          num: 0, // 默认0,回调之前会加1
          size: 10 // 默认10
        },
        htmlNodata:
          '<p class="upwarp-nodata" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">-- 没有更多了 --</p>',
        htmlLoading:
          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">加载中..</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        isBounce: false
      }
    };
  },
  methods: {
    // ========== async ==========
    // 获取列表数据
    async getRecord() {
      let result = await getRecordApi({
        page: this.currentPage,
        pagesize: this.pagesize
      });
      if (iscode(result)) {
        this.show_url = result.result.show_url;
        this.total = result.result.count;
        this.currentData = result.result.list;
      }
    },
    // 上拉加载
    async upCallback(page, mescroll) {
      this.mescroll = mescroll;
      let result = await getRecordApi({
        page: page.num,
        pagesize: page.size
      });
      if (iscode(result)) {
        let resData = result.result.list;
        // 如果是第一页需手动置空列表
        if (page.num === 1) {
          this.currentData = [];
        }
        // 把请求到的数据添加到列表
        this.currentData = [...this.currentData, ...resData];

        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(resData.length);
        });
      }
    },

    // ========== page、mescroll ==========
    // 切换页码
    handleCurrentChange(n) {
      this.currentPage = n;
      this.getRecord();
    },
    // 初始化 mescroll
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    // ========== goto ==========
    goBack() {
      window.history.back();
    }
  },
  created() {
    this.getRecord();
    // 是否是移动端
    isPhone() ? (this.isPhone = true) : (this.isPhone = false);
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  }
};
</script>

<style lang="less" scoped>
.synthetic-history {
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    min-height: 1080px;
    overflow: hidden; // bfa
  }

  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("~@/assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  .contentContainer {
    width: 100%;

    .contentTitle {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 18px;
      margin-top: 30px;
    }

    .contentBody {
      width: 100%;
      margin-top: 20px;
      // padding: 0 30px;
    }

    .noneTip {
      text-align: center;
      margin-top: 30px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      opacity: 0.6;
    }
    .noneTip_txt {
      width: 100%;
      font-size: 14px;
      color: #999;
      margin-top: 20px;
      text-align: center;
    }
    .noneTip_img {
      width: 260px;
    }
  }

  .pag {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 23px;

    /deep/.pagination > .page-item.active > a {
      background-color: #0b81ef;
    }
  }
}

@media screen and (max-width: 768px) {
  .synthetic-history {
    .wrapper {
      width: 100%;
      margin: 0;
    }

    .back_part,
    .pag {
      display: none;
    }

    .contentContainer {
      width: 100%;

      .contentTitle {
        display: none;
      }

      .contentBody {
        width: 100%;
        margin-top: 6.6667vw;
        padding: 0 4vw;
      }

      .noneTip {
        text-align: center;
        margin-top: 8vw;
        font-family: Microsoft YaHei;
        font-weight: bold;
        opacity: 0.6;
      }
      .noneTip_txt {
        width: 100%;
        font-size: 3.7333vw;
        color: #999999;
        margin-top: 5.3333vw;
        text-align: center;
      }
      .noneTip_img {
        width: 69.3333vw;
      }
    }

    /*通过fixed固定mescroll的高度*/
    .mescroll {
      position: fixed;
      left: 0;
      right: 0;
      top: 134px;
      bottom: 0;
      height: auto;
      padding: 0 4vw;
      scroll-behavior: smooth;
    }
  }
}
</style>
